<template>
  <section class="layout">
    <!-- 主内容区域 -->
    <section class="mainContent">
      <!-- 左侧统计图表 -->
      <div class="staChart">
        <keep-alive>
          <StaChart v-if="showChart" :areaId="selectedAreaId"></StaChart>
        </keep-alive>
      </div>

      <!-- 右侧内容区域 -->
      <div class="rightContent">
        <!-- 设备信息块 -->
        <div class="deviceBlockContainer">
          <keep-alive>
            <DeviceBlock :areaId="selectedAreaId" :styleObject="deviceBlockStyle"></DeviceBlock>
          </keep-alive>
        </div>
        
        <!-- 区域数据排名 -->
        <div class="rankingContainer">
          <keep-alive>
            <RegionDataRanking :areaId="selectedAreaId"></RegionDataRanking>
          </keep-alive>
        </div>
      </div>
    </section>
  </section>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import DeviceBlock from "@/components/deviceBlock.vue";
import RegionDataRanking from "@/components/regionDataRanking.vue";
import StaChart from "@/components/staChart.vue"; // 导入统计图表组件
import { useAreaStore } from '@/store/area';

const areaStore = useAreaStore();
const selectedAreaId = computed(() => areaStore.getSelectedAreaId);
const deviceBlockStyle = ref({});
const showChart = ref(false); // 控制统计图表组件显示
showChart.value = true; // 点击后显示统计图表组件
const handleAreaClicked = (areaId) => {
  areaStore.setSelectedAreaId(areaId);
  deviceBlockStyle.value = {}; // 可根据需要设置样式对象

};

// 设置默认区域ID
onMounted(() => {
  if (!selectedAreaId.value) {
    areaStore.setSelectedAreaId(' '); // 替换为实际的默认区域ID
  }
});
</script>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh; 
  width: 100%;
  background-color: #150c41; /* 深蓝色背景 */
}

.mainContent {
  display: flex;
  flex: 1;
  width: 100%;
}

.staChart {
  flex: 2.0; /* 左侧统计图表占据 1.5 的份额 */
  background-color: #f0f0f0; /* 统计图表背景色 */
}

.rightContent {
  flex: 8.5; /* 右侧内容占据 8.5 的份额 */
  display: flex;
  flex-direction: column;
}

.deviceBlockContainer {
  flex: 4;
  height: 625px;
  border: 1px solid #cccccc; /* 添加边框 */
  border-radius: 4px;
  background-color: #2a2c42; /* 背景色 */
}

.rankingContainer {
  flex: 2;
  background-color: #f0f0f0;
  border: 1px solid #cccccc; /* 添加边框 */
  border-radius: 4px;
}
</style>
